<template>
  <div class="exchangeRecord">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="type"
        :label="$t('newpos.type')"
        width="340">
        <template slot-scope="scope">
          <div class="imgType flex">
            <img :src="scope.row.symbel1.icon" alt="">
            <span class="ml5"> {{scope.row.symbel1.value}} </span>
            <span style="color: #999;">({{scope.row.symbel1.chain}} {{ $t('bosChain.chain') }})</span>
            <span style="margin: 0 10px;">-></span>
            <img :src="scope.row.symbel2.icon" alt="">
            <span class="ml5">{{scope.row.symbel2.value}}</span>
            <span style="color: #999;">({{scope.row.symbel2.chain}} {{ $t('bosChain.chain') }})</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="number"
        :label="$t('jy.number')"
        width="200">
        <template slot-scope="scope">
          <span class="blackColor">
            {{scope.row.number}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        :label="$t('exchange.receivingAddress')"
        width="180">
        <template slot-scope="scope">
          <div class="fn-text1 blackColor" style="width: 90%;">{{scope.row.address}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="trxId"
        label="TrxID"
        width="150">
        <template slot-scope="scope">
          <a class="fn-text1" style="width: 90%; color: #278EDA;" target="_blank" :href="`https://btc.com/${scope.row.trxId}`" v-if="scope.row.symbel1.chain === 'EOS'">{{scope.row.trxId}}</a>
          <a class="fn-text1" style="width: 90%; color: #278EDA;" target="_blank" :href="`https://btc.com/${reverseHash(scope.row.trxId)}`" v-else>{{reverseHash(scope.row.trxId)}}</a>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        :label="$t('order.avgType2')">
        <template slot-scope="scope">
          <span class="blackColor" style="color: #278EDA;" v-if="scope.row.status === '0'">
            {{ $t('order.doing') }}
          </span>
          <span class="blackColor" style="color: #009688;" v-if="scope.row.status === '1'">
            {{ $t('order.completed') }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { bitModel } from '@/utils/eos/bitpeicurrex'; // 兑换记录

export default {
  name: 'exchangeRecord', // 兑换记录
  data() {
    return {
      tableData: [
        {
          type: 'EBTC',
          item: {},
          number: '',
          address: '',
          trxId: '',
          status: 0, // 0未完成， 1 已完成
        }
      ],
      options: [
        {
          value: 'EBTC',
          label: 'EBTC',
          icon: 'https://ndi.340wan.com/eos/bitpietokens-ebtc.png',
          chain: 'EOS',
          conversionBi: {
            value: 'BTC',
            label: 'BTC',
            icon: 'https://ndi.340wan.com/upload/20190725/d5757dd9d73f4b78994799ef7e53df90.png',
            chain: 'BTC',
          }
        },
        {
          value: 'EUSD',
          label: 'EUSD',
          icon: 'https://ndi.340wan.com/eos/bitpietokens-eusd.png',
          chain: 'EOS',
          conversionBi: {
            value: 'USDT',
            label: 'USDT',
            icon: 'https://ndi.340wan.com/upload/20190725/1b3aa8830f584448a1a2f8cb2b717adc.png',
            chain: 'BTC',
          }
        },
      ]
    }
  },
  components: {},
  props: {
    exchangeRecordVisible: Boolean,
  },
  watch: {
    exchangeRecordVisible: function change(val) {
      if (val) {
        this.tableData = [];
        this.handleGetTableData('sellorders');
      }
    },
  },
  computed: {},
  created() {},
  mounted() {
    // 兑换记录查询
    // table: 'sellorders' // 待处理的提币操作记录，提币完成后此记录被挪到soldorders表
    // table: 'soldorders' // 提币完成记录表（只保留有限条）
    // table: 'buyorders' // 充值完成后的充值记录
    this.tableData = [];
    this.handleGetTableData('sellorders');
  },
  beforeDestroy() {},
  methods: {
    handleGetTableData(table) {
      bitModel.tableData(table, (res) => {
        if (res && res.rows) {
          this.handleDataFormat(table, res);
          if (table === 'sellorders') {
            this.handleGetTableData('soldorders')
          }
          if (table === 'soldorders') {
            this.handleGetTableData('buyorders')
          }
        }
      })
    },
    handleDataFormat(table, res) {
      if (res.rows && res.rows.length > 0) {
        const list = res.rows;
        list.forEach((v) => {
          const symformat = v.amount.split(' ');
          const item = this.handleFormatSymbel(symformat[1]);
          let symbel1 = null;
          let symbel2 = null;
          if (table === 'sellorders') {
            symbel1 = {
              value: item.value,
              chain: item.chain,
              icon: item.icon,
            }
            symbel2 = {
              value: item.conversionBi.value,
              chain: item.conversionBi.chain,
              icon: item.conversionBi.icon,
            }
          }
          if (table === 'soldorders') {
            // EOS -> BTC
            symbel1 = {
              value: item.value,
              chain: item.chain,
              icon: item.icon,
            }
            symbel2 = {
              value: item.conversionBi.value,
              chain: item.conversionBi.chain,
              icon: item.conversionBi.icon,
            }
          }
          if (table === 'buyorders') {
            // BTC -> EOS
            symbel1 = {
              value: item.conversionBi.value,
              chain: item.conversionBi.chain,
              icon: item.conversionBi.icon,
            }
            symbel2 = {
              value: item.value,
              chain: item.chain,
              icon: item.icon,
            }
          }
          const pushItem = {
            type: table,
            item,
            symbel1,
            symbel2,
            number: v.amount,
            address: v.to_address || this.$store.state.app.scatter.identity.accounts[0].name,
            trxId: table === 'sellorders' ? v.transfer_tx : v.extern_tx,
            status: table === 'sellorders' ? '0' : '1', // 0未完成， 1 已完成
          }
          this.tableData.push(pushItem)
        })
      }
    },
    // 格式化币种信息
    handleFormatSymbel(symbel) {
      const item = this.options.find(v => v.value === symbel);
      return item;
    },

    reverseHash(val) {
      return bitModel.reverseHash(val);
    }
  },
}
</script>
<style lang="scss" scoped>
.exchangeRecord {
  min-height: 400px;

  /deep/ .el-table .el-table__body tr th:nth-child(1) .cell{
    text-align: center;
  }

  .imgType {
    img {
      display: inline-block;
      width: 22px;
      vertical-align: middle;
      margin-top: -1px;
    }
  }
}

.theme-1B1D27 {
  .imgType {
    span {
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .blackColor {
    color: rgba(255, 255, 255, 0.8);
  }
}
</style>
